<template>
	<view class="content">
		<nav-bars bgColor="transparent" title="套餐商品" fontColor="#000"></nav-bars>
		<view class="wrapper">
			<view class="topColumn">
				<view class="titleBox flex">
					<view class="titles">{{product_pack.name}}</view>
					<view class="shareIcon" @click="sharePoster()">
						<image :src="`${baseImg}/static/activity/share-icon.png`"></image>
					</view>
				</view>
				<view class="paramBlock flex">
					<!-- <view class="areas">
						<text>{{product_pack.area}}</text>
						<text>㎡</text>
					</view> -->
					<view class="number">
						<text>{{product_pack.product_num}}</text>
						<text>件商品</text>
					</view>
				</view>
			</view>
			<view class="d_banner">
				<image :src="product_pack.lead_img"></image>
			</view>
			<view class="productPrice">
				<text>精选套餐价：</text>
				<text style="color: #E86F12;">￥</text>
				<text class="t_price">{{product_pack.price}}</text>
				<!-- <text class="t_price">{{product_pack.primary_price}}</text> -->
			</view>
			<!-- 商品列表 -->
			<view class="goodsWrap">
				<view class="columnTitle" v-if="packGoods.length>0">产品包详情</view>
				<view class="goodsBox" v-if="packGoods.length>0">
					<view class="goodsItem flex" v-for="(item,index) in packGoods" :key="index" @click="goSkip('/pagesFour/home/pages_product/product/goodsDetails?id='+item.product_id)">
						<view class="goods-cover">
							<image :src="item.main_imgurl">
							</image>
						</view>
						<view class="goods-dateils">
							<view class="columnTop flex">
								<view class="title text-ellipsis">{{item.product_title}}</view>
							</view>
							<view class="bottomBox flex">
								<view class="spec flex">
									<text v-if="item.sku_data[0].attribute.length>0">{{item.sku_data[0].attribute[0].key}} | {{item.sku_data[0].attribute[0].value}}</text>
									<text style="margin-left: 4rpx;" v-if="item.sku_data[0].attribute.length>0">x{{item.sku_data[0].num}}</text>
								</view>
								<view class="sidebarRight pricr">
									￥{{item.sku_data[0].primary_price}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="d_ctTxt">
					<u-parse :html="details"></u-parse>
				</view>
			</view>
		</view>
		<!--模态弹窗-->
		<qrcode-poster ref="poster" :title="shareData.name" :subTitle="shareData.name" :headerImg="shareData.lead_img"
			:price="shareData.price"></qrcode-poster>
	</view>
</template>

<script>
	import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
	import service_now from '@/service/now.js'
	export default {
		components: {
			QrcodePoster
		},
		data() {
			return {
				id: '',
				thumb_url: [],
				baseImg: this.$static,
				packGoods: [], //产品包商品
				product_pack_scene: {},
				product_pack: {},
				is_show_model: false, //是否显示分享模态窗
				shareData: {}, //分享参数
				sharecode: '', //二维码
				classifyIndex: '',
				classifyList: [],
				cate_name: '',
				details:'',
			}
		},
		onLoad(option) {
			let pack_id = option.id;
			this.id = pack_id;
			this.productPackDateils(pack_id);
			this.packageShare(pack_id);
			this.getProductPackCate(pack_id);
			this.getProductGoods(pack_id)
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) {
				//控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi, '<img style="width:100%;max-width:100%;height:auto;display:inline-block;margin:20rpx auto;border-radius:10rpx;"');
				return newContent;
			}
		},
		methods: {
			//产品包详情
			productPackDateils(id) {
				let params = {
					pack_id: id,
				}
				service_now.productPackDateils(params).then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.product_pack = data.productPack;
						this.details = data.product_pack_scene.content;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2500
						});
					}
				})
			},
			//获取分享参数
			packageShare(id) {
				let params = {
					pack_id: id,
				}
				service_now.productPackShare(params).then(res => {
					if (res.code == 1) {
						this.shareData = res.data.productPack;
						this.sharecode = res.data.wx_code_url;
					}
				})
			},

			//分享海报
			sharePoster() {
				//获取带参数二维码并传递
				this.$refs.poster.showCanvas(this.sharecode);
			},
			//分类列表数据
			getProductPackCate(id) {
				let params = {
					pack_id: id,
				}
				service_now.productPackCate(params).then(res => {
					if (res.code == 1) {
						let data = res.data;
						let cate_id = data[0].cate_id
						this.classifyIndex = cate_id
						this.cate_id = cate_id
						this.cate_name = data[0].cate_name
						this.classifyList = data;
					}
				})
			},
			//商品列表
			getProductGoods(pack_id) {
				let params = {
					pack_id: pack_id
				}
				service_now.productGoods(params).then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.packGoods = data
					}
				})
			},
			// 切换nav栏
			toggleNav(items) {
				if (this.classifyIndex != items.cate_id) {
					this.classifyIndex = items.cate_id
					this.cate_name = items.cate_name
					this.getProductGoods(items.cate_id, items.pack_id);
				}
			},
			goSkip(url) {
				uni.navigateTo({
					url: url
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;

		.wrapper {
			width: 100%;
			background-color: #FFFFFF;

			.topColumn {
				width: 94%;
				margin: 10rpx auto;

				.titleBox {
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;

					.titles {
						width: 75%;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 34rpx;
						font-weight: bold;
						color: #252525;
					}

					.shareIcon {
						width: 80rpx;
						height: 80rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.paramBlock {
					width: 100%;
					height: auto;
					color: #717171;
					font-size: 24rpx;

					.areas {}

					.number {
						margin-left: 8rpx;
					}
				}
			}

			// banner=====
			.d_banner {
				width: 94%;
				margin: auto;
				height: 320rpx;
				background: #f0f0f0;
				position: relative;
				z-index: 1;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}

				.d_bItem {
					width: 100%;
					height: 100%;
					position: relative;
				}

				.d_bTag {
					height: 58rpx;
					line-height: 58rpx;
					color: #fff;
					font-size: 24rpx;
					padding: 0 24rpx;
					border-radius: 28rpx;
					background: rgba(51, 51, 51, 0.8);
					position: absolute;
					bottom: 78rpx;
					right: 36rpx;
				}

				.d_bDots {
					width: 100%;
					position: absolute;
					bottom: 66rpx;
					left: 0;
					display: flex;
					justify-content: center;
				}
			}

			.productPrice {
				width: 100%;
				padding: 16rpx 0 0 20rpx;
				color: #252525;

				text.t_price {
					color: #E86F12;
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.goodsWrap {
				width: 96%;
				margin: 60rpx auto;
             .columnTitle {
             	width: 100%;
             	height: 35rpx;
             	font-size: 32rpx;
             	font-weight: bold;
             	color: #252525;
             }
				.goodsBox {
					width: 100%;
					margin: 50rpx auto;
					position: relative;

					.goodsItem {
						width: 100%;
						height: auto;
						margin-bottom: 60rpx;

						.goods-cover {
							width: 28%;

							image {
								width: 190rpx;
								height: 190rpx;
								border-radius: 10rpx;
							}
						}

						.goods-dateils {
							width: 72%;
							margin-left: 20rpx;
							position: relative;
							.columnTop {
								width: 100%;
								justify-content: space-between;
								position: relative;

								.title {
									width:100%;
									height: 80rpx;
								}

								.shareIcon {
									width: 80rpx;
									height: 80rpx;

									image {
										width: 100%;
										height: 100%;
										margin-top: -8px;
									}
								}
							}

							.bottomBox {
								position: absolute;
								align-items: flex-end;
								justify-content: space-between;
								bottom: 20rpx;
								left: 10rpx;
								right: 10rpx;
								.spec {
									width: 350rpx;
									font-size: 24rpx;
									height: auto;
									color: #92949A;
								}

								.pricr {
									color: #333333;
									font-size: 30rpx;
									font-weight: bold;
									text-decoration:line-through;
								}
							}

						}
					}
				}
			}
		}

		.futitle {
			overflow: hidden;
			padding-top: 18rpx;
			font-size: 22rpx;
		}

		.titlenum {
			display: inline-block;
			float: right;
		}

		.attribute {
			overflow: auto;
			display: flex;

			.N_ibute {
				padding: 0 20rpx 20rpx;
				display: flex;
			}

			.N_name {
				width: 160rpx;
				line-height: 60rpx;
				text-align: center;
				margin-right: 20rpx;
				color: #666;
				background: #F6F7FB;
				-webkit-border-radius: 27px;
				border-radius: 50rpx;
				font-size: 25rpx;

				&:nth-last-child(1) {
					margin: 0;
				}
			}

			.N_name.active {
				background: none;
				border: 1px #E9423E solid;
				color: #E9423E;
			}
		}



		.text-ellipsis {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; // 超出多少行
			-webkit-box-orient: vertical;
		}
	}
</style>
